<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D变换_位移</title>
<!--
坐标轴:从原点开始,x向右 y向下
-->
  <style>
    .outer{
      width: 300px;
      height: 300px;
      border:2px solid black;
      margin:20px;
        position: relative;
    }
    .inner{
      width: 300px;
      height: 300px;
      background-color: deepskyblue;
      text-align: center;
      line-height: 300px;
      /*transform变换   translate位移*/
      /*
      位移与相对定位很像,都不脱离文档流,只是在显示效果中发生改变
      位移的百分比是参考自身
      相对定位的百分比是参考父元素

      位移对行内元素无效
      */
      transform: translateX(20px) translateY(30px) ;/*往左移20px,往下移30px,可以是负值*/
      transform: translateX(50%) translateY(50%) ;/*往左移自己宽度的50%,往下移自己高度的50%,可以是负值*/
    }

    .inner2{
        width: 100px;
        height: 100px;
        /*开启绝对定位,并在父元素上开启相对定位*/
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: green;
        transform: translate(-50%,-50%);
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner">inner1</div>
</div>
<div class="outer">

    <div class="inner2">inner2</div>
</div>
</body>
</html>